<template>
  <div class="bg-gray container">
    <div class="emptyarea" v-if="loaded && !dataList.length">
      <img src="../../assets/imgs/other/car@2x.png" alt="" class="car">
      <div class="txt">
        暂沒发票抬头~
      </div>
    </div>
    <div v-else-if="loaded" class="car-items">
      <div class="car-item" v-for="car in dataList" :key="car.id">
        <div class="car-item-header border-b">
          <div class="flex">
            <div class="brand-info">
              <div class="brand-title">
              开票类型：  {{car.purchaseType?'企业':'个人'}}
              </div>
              <div class="brand-title">
              开票抬头：  {{car.invoice}}
              </div>
              <div class="brand-title">
              纳税人识别号：  {{car.purchaseTaxid}}
              </div>

              <div class="brand-title">
              地址：  {{car.purchaseAddress}}
              </div>
              <div class="brand-title">
              电话：  {{car.purchaseTel}}
              </div>
              <div class="brand-title">
              开户行：  {{car.purchaseOpeningBank}}
              </div>
              <div class="brand-title">
              账号：  {{car.purchaseAccount}}
              </div>
              
            </div>
          </div>
        </div>
        <div class="car-item-footer">
          <div class="flex">
            <div class="flex" @click="setAsDefault(car.id)">

              <img src="../../assets/imgs/other/chceked@2x.png" v-if="car.isdefault" class="checked-icon" alt="">
              <img src="../../assets/imgs/other/noselected@2x.png" v-else class="checked-icon" alt="">
              <div>
                设为默认
              </div> 

            </div>
            <div class="flex flex-con edit-area-wrap">
              <div class="edit-area" @click="eidtCar(car.id)" >
                <img src="../../assets/imgs/other/edit@2x.png" alt="" class="edit-icon"> 编辑
              </div>
              <div class="del-area" @click="delCar(car.id)">
                <img class="del-icon" src="../../assets/imgs/other/del@2x.png" alt=""> 删除
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-areas">
      <router-link class="btn-submit" tag="div" to="/invoiceadd">+添加发票抬头</router-link>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.btn-areas {
  padding-top: 0.7867rem;
  padding-bottom: 2rem;
  text-align: center;
  .btn-submit {
    display: inline-block;
    width: 8.4667rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    color: white;
    font-size: 0.4267rem;
    background-image: url("../../assets/imgs/other/btn.png");
    background-size: 100% 100%;
    background-position: left top;
  }
}
.emptyarea {
  color: #333333;
  font-size: 0.4rem;
  text-align: center;
  padding-top: 2.0933rem;
  .txt {
    padding-top: 0.8rem;
  }
}

.car {
  width: 3.5067rem;
  height: 2.3333rem;
}

.car-item {
  font-size: 0.3467rem;
  background-color: #fff;
  color: #999999;
  margin-bottom: 0.32rem;
}

.car-item-header {
  padding: 0.5867rem 0.32rem 0.6667rem 0.32rem;
}
.checked-icon {
  width: 0.5467rem;
  height: 0.5467rem;
  margin-right: 0.2667rem;
}
.car-item-footer {
  padding: 0.3333rem 0.4rem;
}
.brand-info {
  padding-left: 0.3467rem;
}
.brand-cover {
  width: 1.4rem;
  height: 1.4rem;
}
.edit-icon {
  width: 0.4533rem;
  height: 0.4933rem;
  margin-right: 0.2667rem;
}
.del-icon {
  width: 0.4533rem;
  height: 0.4933rem;
  margin-right: 0.2667rem;
}
.brand-title {
  font-size: 0.4rem;
  color: #333;
  padding-bottom: 0.36rem;
}
.edit-area {
  margin-right: 0.9467rem;
}
.edit-area-wrap {
  justify-content: flex-end;
}
</style>
<script>
import { bankNames } from "../../config/constants";

export default {
  data() {
    return {
      bankNames,
      dataList: [],
      loaded: false
    };
  },
  methods: {
    setAsDefault(id) {
      this.$post("/api/user/invoice/set_default", { id });
      this.dataList.forEach(el => {
        if (el.id == id) {
          el.isdefault = true;
        } else {
          el.isdefault = false;
        }
      });
    },
    eidtCar(id) {
      this.$router.push("/invoiceadd?id=" + id);
    },
    delCar(id) {
      this.$messagebox
        .confirm("确实删除该发票抬头吗")
        .then(_ => {
          this.showLoading();
          this.$post("/api/user/invoice/delete", { id })
            .then(_ => {
              this.hideLoading();
              this.dataList.forEach((el, index) => {
                if (el.id == id) {
                  this.dataList.splice(index, 1);
                }
              });
            })
            .catch(_ => {
              this.hideLoading();
            });
        })
        .catch(_ => {});
    }
  },
  created() {
    this.showLoading();
    this.$post("/api/user/invoice/list")
      .then(data => {
        this.loaded = true;
        this.hideLoading();
        this.dataList = data ||[];
      })
      .catch(_ => {
        this.hideLoading();
      });
  }
};
</script>
